<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
    <link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
    <script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js">
    </script>
    <script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js">
    </script>
    <title>Responsive examples - Responsive</title>
</head>
<body class="dt-example">
<div class="container">
    <section>
        <h1>Responsive example <span>Responsive</span></h1>
        <div class="info">
            <p>In the modern world of responsive web design tables can often cause a particular problem for designers
                due to their row based layout. Responsive is an extension
                for DataTables that resolves that problem by optimising the table's layout for different screen sizes
                through the dynamic insertion and removal of columns from the
                table.</p>
        </div>
    </section>
</div>
<section>
    <div class="footer">
        <div class="gradient"></div>
        <div class="liner">
            <div class="toc">
                <div class="toc-group">
                    <h3><a href="./initialisation/index.html">Basic initialisation</a></h3>
                    <ul class="toc">
                        <li>
                            <a href="./initialisation/className.html">Class name</a>
                        </li>
                        <li>
                            <a href="./initialisation/option.html">Configuration option</a>
                        </li>
                        <li>
                            <a href="./initialisation/new.html">`new` constructor</a>
                        </li>
                        <li>
                            <a href="./initialisation/ajax.html">Ajax data</a>
                        </li>
                        <li>
                            <a href="./initialisation/default.html">Default initialisation</a>
                        </li>
                    </ul>
                </div>
                <div class="toc-group">
                    <h3><a href="./display-types/index.html">Display-types</a></h3>
                    <ul class="toc">
                        <li>
                            <a href="./display-types/immediateShow.html">Immediately show hidden details</a>
                        </li>
                        <li>
                            <a href="./display-types/modal.html">Modal details display</a>
                        </li>
                        <li>
                            <a href="./display-types/bootstrap-modal.html">Bootstrap modal</a>
                        </li>
                        <li>
                            <a href="./display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
                        </li>
                        <li>
                            <a href="./display-types/foundation-modal.html">Foundation modal</a>
                        </li>
                        <li>
                            <a href="./display-types/semanticui-modal.html">Semantic UI modal</a>
                        </li>
                        <li>
                            <a href="./display-types/jqueryui-modal.html">jQuery UI modal</a>
                        </li>
                    </ul>
                </div>
                <div class="toc-group">
                    <h3><a href="./column-control/index.html">Column-control</a></h3>
                    <ul class="toc">
                        <li>
                            <a href="./column-control/auto.html">Automatic column hiding</a>
                        </li>
                        <li>
                            <a href="./column-control/columnPriority.html">Column priority</a>
                        </li>
                        <li>
                            <a href="./column-control/classes.html">Class control</a>
                        </li>
                        <li>
                            <a href="./column-control/init-classes.html">Assigned class control</a>
                        </li>
                        <li>
                            <a href="./column-control/column-visibility.html">With Buttons - Column visibility</a>
                        </li>
                        <li>
                            <a href="./column-control/fixedHeader.html">With FixedHeader</a>
                        </li>
                        <li>
                            <a href="./column-control/colreorder.html">With ColReorder</a>
                        </li>
                    </ul>
                </div>
                <div class="toc-group">
                    <h3><a href="./child-rows/index.html">Child rows</a></h3>
                    <ul class="toc">
                        <li>
                            <a href="./child-rows/disable-child-rows.html">Disable child rows</a>
                        </li>
                        <li>
                            <a href="./child-rows/column-control.html">Column controlled child rows</a>
                        </li>
                        <li>
                            <a href="./child-rows/right-column.html">Column control - right</a>
                        </li>
                        <li>
                            <a href="./child-rows/whole-row-control.html">Whole row child row control</a>
                        </li>
                        <li>
                            <a href="./child-rows/custom-renderer.html">Custom child row renderer</a>
                        </li>
                    </ul>
                </div>
                <div class="toc-group">
                    <h3><a href="./styling/index.html">Styling</a></h3>
                    <ul class="toc">
                        <li>
                            <a href="./styling/bootstrap.html">Bootstrap styling</a>
                        </li>
                        <li>
                            <a href="./styling/bootstrap4.html">Bootstrap 4 styling</a>
                        </li>
                        <li>
                            <a href="./styling/foundation.html">Foundation styling</a>
                        </li>
                        <li>
                            <a href="./styling/semanticui.html">Semantic UI</a>
                        </li>
                        <li>
                            <a href="./styling/jqueryui.html">jQuery UI styling</a>
                        </li>
                        <li>
                            <a href="./styling/compact.html">Compact styling</a>
                        </li>
                        <li>
                            <a href="./styling/scrolling.html">Vertical scrolling</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="epilogue">
                <p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
                    information about its API properties and methods.<br>
                    Additionally, there are a wide range of <a
                            href="http://www.datatables.net/extensions">extensions</a> and <a href=
                                                                                                      "http://www.datatables.net/plug-ins">plug-ins</a>
                    which extend the capabilities of DataTables.</p>
                <p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia
                    Ltd</a> © 2007-2016<br>
                    DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
            </div>
        </div>
    </div>
</section>
</body>
</html>